<template>
  <view
    class="nav-container"
    :class="{ border }"
    :style="[navStyle, navbarStyle]"
    v-show="sysInfo.statusBarHeight"
  >
    <!--    <view class="h-sb"></view>-->
    <slot name="main">
      <view v-if="title" class="title-container" :style="[titleStyle]">
        {{ title }}

        <view class="nav-btn-back">
          <u-icon
            name="arrow-left"
            size="36rpx"
            color="#1f1f1f"
            @click="handleNavBack"
          />
        </view>
      </view>
      <view v-else class="nav-content" :style="[navContent, contentStyle]">
        <slot name="default"></slot>
      </view>
    </slot>
  </view>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import {
  getMenuButtonBoundingRect,
  getSystemSetting
} from '@/utils/helper/cacheQueryHelper'

@Component({ name: 'Navbar' })
export default class Navbar extends Vue {
  @Prop({ type: String, default: '' }) title!: string
  // 整个自定义nanvbar的样式
  @Prop({ type: Object, default: () => ({}) }) navbarStyle!: Recordable
  // 不包含状态栏的样式
  @Prop({ type: Object, default: () => ({}) }) contentStyle!: Recordable
  // 显示标题时，标题的样式
  @Prop({ type: Object, default: () => ({}) }) titleStyle!: Recordable

  // 显示底部边框
  @Prop({ type: Boolean, default: false }) border!: boolean

  /* 顶部胶囊的相关信息 */
  private capsule = getMenuButtonBoundingRect()
  /* 系统相关信息 */
  private sysInfo = getSystemSetting()

  /* 导航栏的样式（不包含状态栏） */
  get navStyle(): Partial<CSSStyleDeclaration> {
    const { top = 24, bottom = 56 } = this.capsule
    const { statusBarHeight = 20 } = this.sysInfo

    const offset = top - statusBarHeight

    return {
      height: `${offset + bottom}px`,
      paddingTop: `${statusBarHeight}px`
    }
  }

  get navContent(): Partial<CSSStyleDeclaration> {
    const { left = 320 } = this.capsule
    return {
      paddingRight: `calc(100vw - ${left}px)`
    }
  }

  handleNavBack() {
    uni.navigateBack()
  }
}
</script>

<style lang="scss" scoped>
.nav-container {
  width: 100vw;
  background-color: transparent;

  &.border {
    box-shadow: 0 1rpx 0 0 rgba(0, 0, 0, 0.1);
    border-bottom: 1rpx solid rgba(245, 245, 245, 0.7);
  }
}

.nav-content {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.title-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: $font-size-base;
  color: $color-first-text;

  position: relative;

  .nav-btn-back {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding-left: $space-sm;
  }
}
</style>
